<template>
    <div class="content">
        <div class="breadcrumb" :gutter="24">
            报表查看
        </div>
        <div class="elContainer" style="padding-top:10px">
            <el-container>
                <el-aside width="200px">
                    <div class="tableAuto">
                        <el-table 
                            :data="tableData" 
                            :height="height"
                            style="width:100%" 
                            stripe
                            :header-cell-style="{background:'#EAEBEC'}"
                            v-loading="tableLoading"
                            @row-click="rowClick" 
                            ref="refTable"
                            highlight-current-row
                        >
                            <el-table-column label="" width="50" align="center">
                                <template slot-scope="scope">
                                    <div>
                                        <i class="iconfont icon-baobiao" v-if="scope.row.icon == 'Reort'"></i>
                                        <i class="iconfont icon-baobiao1" v-if="scope.row.icon == 'Trend'"></i>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" width="" show-overflow-tooltip label=""></el-table-column>
                        </el-table>
                    </div>
                </el-aside>
                <el-main>
                    <iframe class="iframes" :src="url" frameborder="0"></iframe>
                </el-main>
            </el-container>
        </div>
        
    </div>
</template>

<script>
import { userAdmin } from "@/api/userAdmin"    
export default {
    data(){
        return {
            tableData:[],
            tableLoading:false,
            height:document.body.offsetHeight - 135,
            url:""
        }
    },
    created() {
        this.cumLinksList()
    },
    methods:{
        cumLinksList(){
            this.tableLoading = true
            userAdmin.cumLinksList({}).then(res => {
                this.tableLoading = false
                if(res.code == 200){
                    this.tableData = res.data.rows
                    if(this.tableData.length > 0){
                        this.$refs.refTable.setCurrentRow(this.tableData[0])
                        let url = this.tableData[0].url.indexOf("http://")  == 0 || this.tableData[0].url.indexOf("https://")  == 0
                        this.url = url ? this.tableData[0].url : "http://" + this.tableData[0].url
                    }
                }
            })
        },
        rowClick(row){
            let url = row.url.indexOf("http://")  == 0 || row.url.indexOf("https://")  == 0
            this.url = url ? row.url : "http://" + row.url
            this.$refs.refTable.setCurrentRow(row);
        },
    }
}
</script>


<style scoped>
    .breadcrumb{
        border-bottom:1px solid #e4e4e4
    }
  
  .elContainer >>> .el-aside {
    /* background-color: #D3DCE6; */
    color: #333;
    text-align: center;
    border-right:1px solid #D3DCE6
  }
  
  .elContainer >>> .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    padding:0 10px
  }
  .elContainer >>> .el-container{
    height:calc(100vh - 135px)
  }
  .iframes{
        width: 100%;
        height: calc(100vh - 140px);
    }
  /* body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
   .tableAuto >>> .el-table__row{
        background: none !important;
    }
    .tableAuto >>> .el-table--striped .el-table__body tr.el-table__row--striped td{
        background: none;
    }
    .tableAuto >>> .el-table__row td{
        padding: 8px 0;
    }
    .tableAuto >>> .el-table thead{
        display: none;
    }
</style>